<template>
  <div>
    <!--查询条件-->
    <PermissionManageQuery
      v-model:query="query"
      :loadTableList="loadTableList"
      :removeQueryField="removeQueryField"
      :clearQuery="clearQuery"
    />
    <!--表格，包含工具栏和分页-->
    <PermissionManageTable
      :table="table"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      @addRow="addRow"
      @editRow="editRow"
    />
    <PermissionAddOrEditDialog ref="dialogRef" :table="table" :action="action" />
  </div>
</template>

<script lang="ts" setup>
import PermissionManageQuery from '@/views/page/authority/permissionmanage/PermissionManageQuery.vue';
import PermissionManageTable from '@/views/page/authority/permissionmanage/PermissionManageTable.vue';
import PermissionAddOrEditDialog from '@/views/page/authority/permissionmanage/PermissionAddOrEditDialog.vue';
import { provide, ref } from 'vue';
import useTableList from '@/api/hooks/useTableList';
import type { Department } from '@/types/interface/auth_interface';
import type { ResponseData } from '@/types/interface/base_interface';
import urls from '@/api/request/urls';
import Request from '@/api/request/request';

// 表格工具必备参数
const { table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage } = useTableList(
  urls.API_URL_BACKSTAGE_PERMISSION_TREE,
  false
);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

const action = ref('get');
const dialogRef = ref();
// 点击添加按钮，交由父组件处理
const addRow = (id: number) => {
  // id是菜单的主键，表示在该菜单下添加子菜单信息
  // 添加表单的初始值
  const form = {
    sort: 0,
    parentId: id,
    type: 1,
    linkType: 1,
    requireAuth: true,
    enabled: true,
    display: true
  };
  // 表单的模式为添加
  action.value = 'post';
  // 打开对话框
  dialogRef.value!.openDialog(JSON.parse(JSON.stringify(form)));
};

// 编辑按钮操作
const editRow = async (row: Department) => {
  // 编辑表
  action.value = 'put';
  // 读取账户信息
  const resData: any = await new Request(`${urls.API_URL_BACKSTAGE_PERMISSION_MANAGE}/${row.id}`).get();
  if (resData.success) {
    const form = resData.data;
    dialogRef.value!.openDialog(JSON.parse(JSON.stringify(form)));
  }
};
</script>
<style lang="scss" scoped></style>
